<template>
	<div v-loading="loading">
		<!--配置文件-->
		
		<el-alert
	    title="配置文件用于部署不同环境所需要修改的配置信息总集，可以是单个文件或者目录，发布时可自行修改。"
	    type="info">
	  </el-alert>
	  
	  
	  
			<addListTableBySlot
				ref="addListTableBySlot"
				:data="formData" :options="options" @change="changeConfig">
				
				<template slot="configParentPathSlot" slot-scope="{scope}">
					<el-form :ref="'formRef'+ scope.row.templateId" 
						:model="scope.row" 
						:rules="configParentPathRules">
						<el-form-item label="" prop="configParentPath">
							<div v-if="scope.row.usedMethod==2">
								<el-input 
									placeholder="系统自适应"
									disabled
									type="text"
									></el-input>
							</div>
							<div v-else>
								<el-input 
									@change="(v)=>{scope.row.configParentPath=v;scope._self.emitDataChange()}"
									v-model="scope.row.configParentPath" 
									type="text"
									></el-input>
							</div>
					  </el-form-item>
					</el-form>
				</template>
				
				<template slot="uploadSlot" slot-scope="{scope}">
					<span v-if="scope.row.usedMethod==2">
								内置文件不可替换
					</span>
					<el-form class="file-elform" v-else :ref="'formRef_file'+ scope.row.templateId" 
						:model="scope.row" 
						:rules="configSourceFileRules">
						<el-form-item label="" prop="configSourceFile">
					    	<uploadBtn :options="{}" @success="(name,{res,file})=>{scope.row.configName=file.name;scope.row.configSourceFile=res.data;scope._self.emitDataChange()}"
					></uploadBtn>
					  </el-form-item>
					</el-form>
				
				</template>
				
				<template slot="configNameSlot" slot-scope="{scope}">
					<span v-if="scope.row.configName">
						{{scope.row.configName}}
						<i style="cursor: pointer;" class="iconfont icon-write" @click="openEditFileDialog(scope)"></i>
					</span>
				</template>
				
			</addListTableBySlot>
		
		
		
		<updateFileDialog
			ref="updateFileDialog"
			@editSucess="updateRowFile"
		></updateFileDialog>
		
			
	</div>
</template>

<script>
	import addListTableBySlot from "@/view/components/table/addListTableBySlot";
	import baseSelect from "@/view/components/select/select";
	import uploadBtn from "@/view/components/upload/uploadBtn";
	import updateFileDialog from "@/view/components/dialog/updateFileDialog";
	import {getAppConfig} from "@/service/swagger/AcTemplateController";
	import {refAutoValidate} from "@/utils/validate";
	
export default {
	props: [
		"defaultValue", // 
		"autoAddList",
	],
	components: {
		baseSelect,
		addListTableBySlot,
		uploadBtn,
		updateFileDialog,
	},
	data() {
		return {
			loading : false,
			formData : [],
			
			options: {
				autoAddList : this.autoAddList ,
				editDisabled: false,
				header: [{
					label: "运行时配置目录",
					propName: "configParentPath",
					slotName:"configParentPathSlot",
					align: "left",
				}, {
					label: "点击上传",
					width:"140px",
					propName: "",
					slotName:"uploadSlot",
				}, {
					label: "文件名称",
					propName: "configName",
					slotName:"configNameSlot",
					align: "center",
				},],
				defaultNewRow: {
					configName: "",
					configParentPath:"",
					configSourceFile: "",
					usedMethod: 1,
				},
				btnsConfig:{
					"delete" : {
						show : (row)=>{
							return row.usedMethod != 2 ;
						},
					}
				}
			},
			
			configParentPathRules:{
				configParentPath : []
			},
			configSourceFileRules:{
				configSourceFile : []
			},
			 
		}
	},
	mounted() {
		
	},
	methods: {
		init(options){
			let params = {
				deployType : options.deployType ,
				deployModel : options.deployModel,
				appType : options.appType,
			}
			getAppConfig(params).then(ret=>{
				if(!ret.code){
					
					let arr = [];
					ret.data.forEach(el=>{
						arr.push({
							id : el.id,
							configName: el.itemName,
							configParentPath:"",
							configSourceFile: el.itemTemplate ,
							usedMethod: 2, // 系统默认
						})
					})
					this.formData = arr ;
					this.renderTable()
				}
			})
			
		},
		
		initData(data){
			//console.log("加载已有配置")
			// 加载已有配置
			if(data){
				this.formData = data;
				this.renderTable()
			}
		},
		
		renderTable(){
			this.$refs.addListTableBySlot.initListData(this.formData)
		},
		
		changeConfig(name, v) {
			console.log( "自定义 添加编辑 列表数据变更", name, v)
			this.formData = v ;
			this.emitChange();
		}, 
		
		emitChange(){
			this.$emit("change","configFile", this.formData , this.deployModelList )
		},
		
		openEditFileDialog(scope){
			
			this.$refs.updateFileDialog.open().init({
				filePath : scope.row.configSourceFile ,
				fileName : scope.row.configName
			})
			
			this.editingScope = scope;
		},
		updateRowFile(name,v){
			const scope = this.editingScope ;
			scope.row.configSourceFile = v;
			scope._self.emitDataChange();
		},
		
		validateCreat(callback){
			// 此处改写 验证规则
			configParentPathRules.configParentPath = [
				{ required: true, message: '配置目录不能为空', trigger: 'blur' },
			]
			configSourceFileRules.configSourceFile =  [
				{ required: true, message: '请上传文件', trigger: 'blur' },
			]
			refAutoValidate(this.$refs,"formRef",callback);
		},
		
		validateDeploy(callback){
			// 此处改写 验证规则
			refAutoValidate(this.$refs,"formRef",callback);
		},
		
	}

}
</script>

<style lang="scss">
	
	.file-elform {
		.el-form-item__error {
			display: none;
		}
		.is-error {
			.el-upload {
				button {
					color: #F56C6C;
					border-color: #F56C6C;
				}
			}
		}
	}
	
</style>